<template>
	<view class="index">
		<view class='box'>
			<view class="time">
				<view class="timetitle">剩余时间</view>
				<view class="counttime">
					<text>{{timeobj.minute}}</text>
					<text>:</text>
					<text>{{timeobj.second}}</text>
				</view>
			</view>
			<view class="btnbox">
				<view class="btn" @click="goBack('time')">返回主页</view>
				<view class="btn" @click="$linkTo('/package/RhythmicInstrument/order/index')">订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		resGet
	} from '@/common/http.request'
	import {
		countTime
	} from '@/utils/moment/index.js';
	export default {
		data() {
			return {
				dataList: [],
				time: '',
				timeobj: {},
				id: '',
				endtime: '',
				totalNum: 30, //控制30秒查一次机器状态
				times: '',
				dataForm: {
					Auto: false,
					Frequency: 3,
					Intensity: 5,
					Minute: 5,
					On: true
				}
			}
		},
		onLoad(option) {
			this.id = option.id
			if (option.Frequency && option.Intensity) {
				this.dataForm.Frequency = option.Frequency
				this.dataForm.Intensity = option.Intensity
			}

		},
		onShow() {
			this.initPage()
		},
		methods: {
			initPage() {
				this.$loading()
				this.$resPost('GetRhythmOrder', {}).then(({
					data
				}) => {
					this.dataForm.Minute = data.time
					console.log(data.time, 'dindan')
					let newTimes = new Date().getTime()
					
					let date = data.end_date.replace(/-/g, "/");
					console.log(data.end_date, 'dingdanend')
					let endTimes = new Date(date).getTime()
					this.endtime = endTimes - newTimes
					console.log(newTimes, endTimes, 'xinjiu')
					this.initTime(this.id)
					this.$hide()
				}).catch(err => {
					this.$toast(err)
				})
			},
			checkmachine(id) {
				resGet('GetItem', {
					id
				}, {}, {
					baseUrl: 'https://ldy.lumachina.net'
				}).then(res => {
					this.dataForm = res.data
					delete this.dataForm.UpdateTime
					if (!res.data.On) {
						this.$resPost('UpdateMode', {
							...this.dataForm
						}, {}, {
							baseUrl: 'https://ldy.lumachina.net'
						}).then(() => {}).catch(err => {
							this.$toast('启动失败')
						})
					}
				})
			},
			initTime(id) {
				resGet('GetItem', {
					id
				}, {}, {
					baseUrl: 'https://ldy.lumachina.net'
				}).then(res => {
					let time = res.data.Minute
					if (!res.data.On) {
						this.$resPost('UpdateMode', {
							...this.dataForm,
							id,
						}, {}, {
							baseUrl: 'https://ldy.lumachina.net'
						}).then(() => {
							console.log(this.endtime, 'guan')
							this.settime(this.endtime)
						}).catch(err => {
							this.$toast('启动失败')
						})
					} else {
						this.dataForm = {
							...res.data
						}
						if (!this.dataForm.On) this.dataForm.On = true
						console.log(this.endtime, 'kai')
						this.settime(this.endtime)
					}
				}).catch((err) => {
					this.$toast(err)
				})
			},
			settime(minute) {
				let that = this
				console.log(minute)
				if (minute > 0) {
					if (that.totalNum == 0) {
						this.checkmachine(that.id)
						that.totalNum = 30
					}
					that.totalNum--
					this.timeobj = countTime(minute)
					this.time = setTimeout(() => {
						this.settime(this.timeobj.nextTime)
					}, 1000)
				} else {
					clearInterval(this.time)
					this.$toast('体验结束')
					setTimeout(() => {
						that.$linkTo(
							`/package/RhythmicInstrument/index?id=${that.id}`,
							'reLaunch')
					}, 1000)
				}
			},
			goBack(val) {
				if (this.times) {
					clearInterval(this.times)
				}
				this.$linkTo(`/package/RhythmicInstrument/index?id=${this.id}`, val == 'time' ? '' : 'reLaunch')

			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100%;
		height: 100vh;
		background-image: url();
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.box {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
			position: relative;

			.btn {
				width: 220rpx;
				height: 68rpx;
				background: rgba(103, 161, 255, 0.6);
				border-radius: 34rpx;
				font-size: 28rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.time {
				width: 100%;
				position: absolute;
				top: 290rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.timetitle {
					font-size: 80rpx;
					font-weight: bold;
					color: #fff;
					padding-bottom: 130rpx;
				}

				.counttime {
					display: flex;
					align-items: center;
					font-size: 100rpx;
					color: #fff;
					font-weight: bold;
				}
			}

			.btnbox {
				position: absolute;
				bottom: 150rpx;
				width: 100%;
				padding: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.btn {
					width: 220rpx;
					height: 68rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					color: #1966FF;
					font-size: 28rpx;
				}
			}
		}

		.box1 {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 10;

			.props {
				width: 468rpx;
				height: 547rpx;
				border-radius: 10rpx;
				background-color: #fff;

				.p-bg {
					width: 100%;
					height: 150rpx;
				}

				.title {
					width: 100%;
					padding: 90rpx;
					font-size: 38rpx;
					color: #5B60F9;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-weight: bold;
				}

				.p-btn {
					width: 370rpx;
					height: 70rpx;
					color: #fff;
					background: linear-gradient(117deg, #BE7EF1, #5B60F9);
					box-shadow: 0 6rpx 28rpx 0 rgba(32, 36, 161, 0.27);
					border-radius: 34rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 50rpx;
				}
			}
		}
	}
</style>
